<template>
  <div style="display: flex; align-items: center">
    <component :is="iconName" :color="color" :size="size" :customStyle="customStyle"> </component>
    <span style="display: none" ref="iconNameRef"><slot></slot></span>
  </div>
</template>
<script>
import mixins from "./home/iconmixins";
import componentsMixins from "./IconCompoents";

export default {
  mixins: [mixins, componentsMixins],
  data() {
    return { iconName: "span", mutationObserver: null };
  },
  mounted() {
    this.iconName = this.$refs.iconNameRef.textContent.trim();
    const iconNameChange = () => {
      this.iconName = this.$refs.iconNameRef.textContent.trim();
    };
    this.mutationObserver = new MutationObserver(iconNameChange.bind(this));
    this.mutationObserver.observe(this.$refs.iconNameRef, {
      childList: true,
      subtree: true,
      characterData: true,
    });
  },
  unmounted() {
    this.mutationObserver.disconnect();
  },
};
</script>
